<template>
<div class="tagTree">
  <el-tree
    :data="tagTree"
    :props="defaultProps"
    node-key="id"
    :default-expanded-keys="[-1]"
    :expand-on-click-node="false"
    :render-content="renderContent"
    @node-click="node => $emit('node-click', node)">
  </el-tree>
  <el-dialog width="30%" title="新建分类" :visible.sync="dialog" :modal="false" @open="dirName=''">
    <el-input v-model="dirName" placeholder="请输入分类名称"></el-input>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialog = false;">取 消</el-button>
      <el-button type="primary" @click="handleSaveDir" :loading="isSave">保存</el-button>
    </div>
  </el-dialog>
</div>
</template>
<script>
  import {mapState, mapActions} from 'vuex'
  export default {
    data () {
      return {
        defaultProps: {
          children: 'child',
          label: 'name'
        },
        dirName: '',
        dialog: false,
        isSave: false
      }
    },
    props: {
      groupId: {
        type: String
      },
      'edit': {
        type: Boolean,
        default: true
      }
    },
    watch: {
      // groupId改变时获取对应的标签树
      groupId (val) {
        this.getTagTree(val)
      }
    },
    computed: {
      ...mapState({
        tagTree: state => state.cusManage.tagTree
      })
    },
    methods: {
      ...mapActions(['getTagTree', 'addTagClass', 'delTagClass']),
      // 添加标签分类
      handleSaveDir () {
        this.isSave = true
        this.addTagClass({
          name: this.dirName,
          pid: this.dirId === -1 ? null : this.dirId,
          gid: this.groupId
        })
        .then((res) => {
          this.isSave = false
          if (res.data.code === 1) {
            this.getTagTree(this.groupId)
            this.dialog = false
            this.$message.success('添加成功')
            this.$emit('add-success')
          }
        })
      },
      // 删除标签分类
      remove (store, data) {
        this.$confirm('删除分类将删除该分类下的所有分类及标签，是否确定？', '确认删除')
          .then(() => {
            return this.delTagClass({
              tagId: data.id,
              gid: this.groupId
            })
          })
          .then(res => {
            if (res.data.code === 1) {
              store.remove(data)
              this.$message.success('删除成功')
            }
          })
      },
      // 点击添加分类
      handleAddTagClick (store, data) {
        this.dialog = true
        this.dirId = data.id
      },
      // 渲染自定义内容
      renderContent (h, { node, data, store }) {
        return (
          <span style="display:inline-block;width:90%;">
            <span>
              <span style="float:left;">{node.label}</span>
            </span>
            {this.edit ? <span style="float: right;margin-right:5px;">
              <el-button type="text" size="mini" on-click={() => this.handleAddTagClick(store, data)}>添加</el-button>
              {data.id !== -1 ? <el-button class="del" type="text" size="mini" on-click={ () => this.remove(store, data) }>删除</el-button> : ''}
            </span> : ''}
          </span>
        )
      }
    }
  }
</script>
